<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>阅读页面</title>
    <script th:src="@{/font/read.js}"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

    <style>
        .box {
            width: 1160px;
            margin: 0 auto;
            overflow: hidden;
            text-align: center;
        }

        .box img {
            width: 800px;
            margin: 0 auto;
        }
        h4:hover{
            color: #ff7a9c;
        }
    </style>
</head>
<body>
<div id="box" class="box">
        <div v-for="count in pageInfo.pageCount">
            <img :src="'http://localhost:8081/imgs/resource/'+rid+'/'+sid+'/'+count+'.jpg'" alt="">
            <div>{{count}}/{{pageInfo.pageCount}}</div>
        </div>

        <div>
            <h4 @click="addToCollection">
                加入收藏
            </h4>
            <h4 @click="nextSection">
                下一话
            </h4>
            <h4 @click="goRemark">
                去评论
            </h4>
            <h4>
                投月票
            </h4>
        </div>
</div>
<script>
    let mainapp = new Vue({
        el: "#box",
        data: {
            loginUser:'',
            rid: '',
            sid: '',
            uid:'',
            pageInfo: '',
            nextSectionId:''
        },
        methods: {
            GetQueryString(name) {
                let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
                let r = decodeURI(window.location.search).substr(1).match(reg);
                if (r != null) {
                    return unescape(r[2]);
                }
                return null;
            },
            initUser() {
                let url = "http://localhost:9999/user/getLoginUser"
                axios.get(url).then((resp) => {
                    this.loginUser = resp.data.data
                    console.log("===================="+this.loginUser)
                    this.uid=this.loginUser.id
                    console.log("===================="+this.uid)
                })
            },
            getPageList() {
                let url = "http://localhost:9999/section/initPageList"
                axios.get(url, {
                    params: {
                        uid: this.uid,
                        rid: this.rid,
                        sid: this.sid
                    }
                }).then((resp) => {
                    if (resp.data.code == 201) {
                        alert("资源加载失败 三秒后返回")
                        setTimeout(function () {
                            location.href = "http://localhost:9999/comicDetail?id=" + this.rid
                        }, 3000);
                    }
                    if (resp.data.code == 202) {
                        alert("阅读付费章节未登录 三秒后转跳登录页面")
                        setTimeout(function () {
                            location.href = "http://localhost:9999/login"
                        }, 3000);
                    }
                    if (resp.data.code == 203) {
                        alert("抱歉余额不足 三秒后转跳个人中心")
                        setTimeout(function () {
                            location.href = "http://localhost:9999/person"
                        }, 3000);
                    }
                    if (resp.data.code == 200) {
                         this.pageInfo=resp.data.data
                    }
                })
            },
            initParms() {
                this.sid = this.GetQueryString("sid")
                this.rid = this.GetQueryString("rid")
            },
            addToCollection(){
                let url = "http://localhost:9999/collection/add"
                axios.get(url,{
                    params: {
                        uid:this.loginUser.id,
                        rid:this.rid
                    }
                }).then((resp) => {
                    alert(resp.data.msg)
                })
            },
            getNextSectionId(){
                let url = "http://localhost:9999/section/next"
                axios.get(url,{
                    params: {
                        rid:this.rid,
                        sid:this.sid
                    }
                }).then((resp) => {
                    this.nextSectionId=resp.data.data
                })
            },
            nextSection(){
                location.href="http://localhost:9999/read?rid="+this.rid+"&sid="+this.nextSectionId
            },
            goRemark(){
                location.href="http://localhost:9999/comicDetail?id="+this.rid
            }

        },
        created() {
            this.initUser()
            this.initParms()
            this.getPageList()
            this.getNextSectionId()
        }
    })

</script>

</body>
</html>
